/*
  学习目标：受控组件 - 类似v-model

  步骤💥：
     1. state控制表单元素的value或checked属性
     2.   监听表单元素的onChange事件, 配合setState修改数据

  场景💥: 
    1. 收集用户输入内容
    2. 回填表单数据
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    msg: 'hello',
  };

  render() {
    return (
      <div>
        <input
          type="text"
          // 1. state控制表单元素的value或checked属性
          value={this.state.msg}
          // 2. 监听表单元素的onChange事件, 配合setState修改数据
          // React特殊处理了onChange, 监听所有表单元素的改变事件
          onChange={(e) => {
            this.setState({ msg: e.target.value });
          }}
          // 失焦变成了onBlur
          onBlur={() => {
            console.log('我被触发了  ----->  ');
          }}

          // onInput={(e) => {
          //   this.setState({ msg: e.target.value });
          // }}
        />
      </div>
    );
  }
}
